<form class="form-horizontal" role="form" action="*">
	<div class="custom-menu">
		<div><button id="add-menu" class="btn btn-primary margin-bottom">添加主菜单</button></div>
		<header class="custom-menu-header row">
			<div class="col-xs-1">显示顺序</div>
			<div class="col-xs-5">主菜单名称</div>
			<div class="col-xs-5">触发关键词或链接</div>
			<div class="col-xs-1">操作</div>
		</header>
		<section class="custom-menu-body" id="custom-menu-body">
			<div class="custom-menu-item">
				<div class="row has-success">
					<div class="col-xs-1">
						<input type="number" class="form-control" placeholder="">
					</div>
					<div class="col-xs-5">
						<input type="text" class="form-control" placeholder="">
					</div>
					<div class="col-xs-5">
						<input type="text" class="form-control" placeholder="">
					</div>
					<div class="col-xs-1">
						<a href="javascript:void(0)" class="add-submenu btn btn-info">增加子菜单</a>
					</div>
				</div>
			</div>
		</section>
	</div>
</form>

<script type="text/javascript">

	$("#add-menu").click(function(){
		
		var len = $(".custom-menu-item").length;
		if( len<3 ){
			
		    var html =	 "<div class='custom-menu-item'>"
		    			+"<div class='row has-success'>"
		    			+"<div class='col-xs-1'><input type='number' class='form-control' placeholder='' /></div>"
		    			+"<div class='col-xs-5'><input type='text' class='form-control' placehloder='' /></div>"
		    			+"<div class='col-xs-5'><input type='text' class='form-control' placehloder='' /></div>"
		    			+"<div class='col-xs-1'><a href='javascript:void(0)' class='add-submenu btn btn-info'>增加子菜单</a></div>"
						+"</div>";			
			$("#custom-menu-body").append( html );
			
		} else {
			$().alertMsg( {type: "danger", msg: "主菜单不能超过 3 个"} );
		}
		
	});
	
	$("#custom-menu-body").delegate("a.add-submenu", "click", function(){
		
		var len = $(this).parent().parent().siblings(".custom-submenu-item").length;
		
		if ( len >= 5 ) { 
			$().alertMsg( {type: "danger", msg: "二级菜单不能超过 5 个"} );
			return;
		};
		
		var html =  "<div class='custom-submenu-item row'>"
					+"<div class='col-xs-1'><input type='number' class='form-control' placeholder='' /></div>"
					+"<div class='col-xs-5'><i class='board'></i><input type='text' class='form-control w40' placeholder='' /></div>"
					+"<div class='col-xs-5'><input type='text' class='form-control' placeholder='' /></div>"
					+"</div>";
		
		$(this).parent().parent().after( html );
	});
	
</script>
